<template>
  <div class="page-container">
    <aside class="sidebar">
      <ul>
        <li
          v-for="(section, index) in sections"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="currentIndex = index"
        >
          {{ section.title }}
        </li>
      </ul>
    </aside>
    <main class="content">
      <h1>{{ sections[currentIndex].title }}</h1>
      <div class="section-media">
        <img :src="sections[currentIndex].img" :alt="sections[currentIndex].title" />
      </div>
      <div class="section-text" v-html="sections[currentIndex].content"></div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Section {
  title: string;
  img: string;
  content: string;
}

const sections = ref<Section[]>([
  {
    title: '概念与背景',
    img: '/assets/engineering-overview.jpg',
    content: `
      <p>前端工程化是指通过一系列工具和流程，将前端开发中的常见重复性工作进行自动化和规范化，以提高开发效率、代码质量和团队协作能力。</p>
      <ul>
        <li>自动化：减少手动操作，降低出错率。</li>
        <li>标准化：统一项目结构和编码规范。</li>
        <li>可维护性：模块化和组件化设计。</li>
      </ul>
    `
  },
  {
    title: '构建工具与模块打包',
    img: '/assets/build-tools.jpg',
    content: `
      <p>模块打包工具（如 Webpack、Rollup、esbuild、Vite 等）是前端工程化的核心，它们将项目中的多种资源（JS、CSS、图片）打包并优化。</p>
      <figure>
        <img src="/assets/webpack-diagram.png" alt="Webpack 构建流程图" />
        <figcaption>Webpack 构建流程示意图</figcaption>
      </figure>
      <p>关键功能：</p>
      <ol>
        <li>代码分割：按需加载，减少首屏体积。</li>
        <li>Tree Shaking：剔除未使用的代码。</li>
        <li>源码映射：帮助调试源代码。</li>
      </ol>
    `
  },
  {
    title: '自动化脚本与任务运行',
    img: '/assets/automation-scripts.jpg',
    content: `
      <p>使用 npm scripts、Gulp、Grunt 等工具，统一管理编译 Sass/LESS、转换 Babel、静态检查（ESLint）等流程。</p>
      <pre><code>"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint src --fix",
  "test": "vitest"
}</code></pre>
      <p>结合 <strong>热更新</strong>，提升本地开发体验。</p>
    `
  },
  {
    title: '代码质量与测试',
    img: '/assets/code-quality.jpg',
    content: `
      <p>通过 ESLint、Prettier、Stylelint 等工具保证代码规范一致；使用 TypeScript 提供静态类型检查。</p>
      <figure>
        <img src="/assets/jest-logo.png" alt="Jest 测试框架" />
        <figcaption>使用 Jest 进行单元测试</figcaption>
      </figure>
      <p>测试示例：</p>
      <pre><code>import { sum } from '../utils';

describe('sum 函数', () => {
  it('应返回两个数之和', () => {
    expect(sum(1, 2)).toBe(3);
  });
});</code></pre>
    `
  },
  {
    title: '持续集成与部署',
    img: '/assets/ci-cd.jpg',
    content: `
      <p>通过 GitHub Actions、GitLab CI/CD 等平台，实现代码推送即测试、打包、部署。</p>
      <p>示例 GitHub Actions 配置：</p>
      <pre><code>name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install
        run: npm install
      - name: Test
        run: npm test
      - name: Build
        run: npm run build</code></pre>
    `
  },
  {
    title: '性能监控与优化',
    img: '/assets/performance-monitoring.jpg',
    content: `
      <p>部署后使用 Lighthouse、Bundle Analyzer 评估性能，通过埋点和 Sentry 等监控运行时错误和性能指标。</p>
      <figure>
        <img src="/assets/lighthouse-report.png" alt="Lighthouse 报告" />
        <figcaption>Lighthouse 性能评估示例</figcaption>
      </figure>
      <p>优化策略：懒加载、资源预加载、减少关键路径资源。</p>
    `
  }
]);

const currentIndex = ref(0);
</script>

<style scoped>
.page-container {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 240px;
  border-right: 1px solid #eaeaea;
  padding: 20px;
  background: #fafafa;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar li {
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.sidebar li.active {
  background: #f0f0f0;
  font-weight: bold;
}
.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}
.content h1 {
  margin-top: 0;
  margin-bottom: 16px;
}
.section-media img {
  max-width: 100%;
  margin-bottom: 16px;
  border-radius: 4px;
}
.section-text p,
.section-text ul,
.section-text ol,
.section-text pre {
  margin-bottom: 16px;
  line-height: 1.6;
}
.section-text figure {
  margin: 16px 0;
  text-align: center;
}
.section-text figcaption {
  font-size: 0.9em;
  color: #666;
}
@media (max-width: 600px) {
  .page-container {
  display: block;
}
}
</style>